<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <title>购物车 - 万万书城</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
        }
        .nav a:hover {
            text-decoration: underline;
        }
        .content {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .cart-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
        }
        h2 {
            margin-top: 0;
            color: #333;
        }
        .cart-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .cart-table th, .cart-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .cart-table th {
            background-color: #f0f0f0;
        }
        .quantity-input {
            width: 60px;
            padding: 5px;
        }
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
        }
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        .btn-primary:hover {
            background-color: #45a049;
        }
        .btn-danger {
            background-color: #f44336;
            color: white;
        }
        .btn-danger:hover {
            background-color: #d32f2f;
        }
        .btn-secondary {
            background-color: #f0f0f0;
            color: #333;
        }
        .btn-secondary:hover {
            background-color: #e0e0e0;
        }
        .cart-summary {
            margin-top: 20px;
            text-align: right;
        }
        .total-price {
            font-size: 20px;
            font-weight: bold;
            color: #e74c3c;
        }
        .actions {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }
        .empty-cart {
            text-align: center;
            padding: 50px;
            color: #666;
        }
        .deleted-notice {
            background-color: #ffebee;
            color: #c62828;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .user-info {
            color: white;
        }
        .user-info a {
            color: white;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-container">
        <div class="logo">万万书城</div>
        <div class="nav">
            <a href="index.jsp">首页</a>
            <a href="cart">购物车</a>
            <a href="order?action=list">我的订单</a>
            <a href="userCenter">用户中心</a>
        </div>
        <div class="user-info">
            <% if (session.getAttribute("user") != null) {
                com.wanwanbookstore.entity.User user = (com.wanwanbookstore.entity.User) session.getAttribute("user");
                out.println(user.getUsername() + " <a href='logout'>退出</a>");
            } else {
                out.println("<a href='login.jsp'>登录</a> <a href='register.jsp'>注册</a>");
            }
            %>
        </div>
    </div>
</div>

<div class="content">
    <div class="cart-container">
        <h2>我的购物车</h2>

        <!-- 已下架商品提示 -->
        <c:if test="${not empty deletedItems}">
            <div class="deleted-notice">
                <p>以下商品已下架，请移除：</p>
                <c:forEach items="${deletedItems}" var="item">
                    <p>${item.book != null ? item.book.title : '商品ID: ' + item.bookId} - 数量: ${item.quantity}</p>
                </c:forEach>
            </div>
        </c:if>

        <c:if test="${empty cartItems}">
            <div class="empty-cart">
                <p>购物车空空如也</p>
                <a href="index.jsp" class="btn btn-primary">去购物</a>
            </div>
        </c:if>

        <c:if test="${not empty cartItems}">
            <form action="cart" method="post">
                <input type="hidden" name="action" value="update">
                <table class="cart-table">
                    <tr>
                        <th>商品信息</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                    <c:forEach items="${cartItems}" var="item">
                        <tr>
                            <td>
                                <div>
                                    <c:if test="${item.book == null}">
                                        <strong style="color: red;">图书信息不存在</strong>
                                    </c:if>
                                    <c:if test="${item.book != null}">
                                        <strong>${item.book.title}</strong>
                                        <div>作者：${item.book.author}</div>
                                        <!-- 简化处理，暂时不显示已下架状态 -->
                                    </c:if>
                                </div>
                            </td>
                            <td>
                                <c:if test="${item.book == null}">¥0</c:if>
                                <c:if test="${item.book != null}">¥${item.book.price}</c:if>
                            </td>
                            <td>
                                <input type="number" name="quantity" value="${item.quantity}" min="1" class="quantity-input">
                                <input type="hidden" name="itemId" value="${item.id}">
                            </td>
                            <td>
                                <c:if test="${item.book == null}">¥0</c:if>
                                <c:if test="${item.book != null}">¥${item.totalPrice}</c:if>
                            </td>
                            <td>
                                <button type="submit" class="btn btn-secondary">更新</button>
                                <button type="button" class="btn btn-danger" onclick="deleteItem(${item.id})">删除</button>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </form>

            <div class="cart-summary">
                <span class="total-price">总计：¥${totalPrice}</span>
            </div>

            <div class="actions">
                <button type="button" class="btn btn-secondary" onclick="clearCart()">清空购物车</button>
                <a href="checkout" class="btn btn-primary">去结算</a>
            </div>
        </c:if>
    </div>
</div>

<script>
    function deleteItem(itemId) {
        if (confirm('确定要删除这个商品吗？')) {
            const form = document.createElement('form');
            form.method = 'post';
            form.action = 'cart';

            // 创建并设置action字段
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = 'delete';
            form.appendChild(actionInput);

            // 创建并设置itemId字段
            const itemIdInput = document.createElement('input');
            itemIdInput.type = 'hidden';
            itemIdInput.name = 'itemId';
            itemIdInput.value = itemId; // 直接设置值，避免模板字符串问题
            form.appendChild(itemIdInput);

            document.body.appendChild(form);
            form.submit();
        }
    }

    function clearCart() {
        if (confirm('确定要清空购物车吗？')) {
            const form = document.createElement('form');
            form.method = 'post';
            form.action = 'cart';
            form.innerHTML = '<input type="hidden" name="action" value="clear">';
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
</body>
</html>